<template>
  <div class="contents">
    <el-tabs v-model="activeName">
      <el-tab-pane label="按分拣员统计" name="first">
        <div class="rankingModule">
          <el-row type="flex" align="middle">
            <el-col :span="4">
              <span class="_icons"></span>
              <span>分拣绩效排名</span>
            </el-col>
            <el-col :span="18">
              <div style="display: flex;">
                <el-select placeholder="请选择" style="width: 100px;">
                  <el-option
                    v-for="item in opt1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-radio-group
                  v-model="radio1"
                  size="small"
                  style="margin: 0 15px;"
                >
                  <el-radio-button label="昨日"></el-radio-button>
                  <el-radio-button label="近7日"></el-radio-button>
                  <el-radio-button label="近30天"></el-radio-button>
                </el-radio-group>
                <el-date-picker
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 200px;"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col :span="13">
              <el-radio-group v-model="radio2" size="small">
                <el-radio-button label="分拣订单数"></el-radio-button>
                <el-radio-button label="分拣包裹数"></el-radio-button>
                <el-radio-button label="分拣数量"></el-radio-button>
                <el-radio-button label="分拣金额"></el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          <!-- 图表 -->
          <vab-chart
            style="width: 100%;"
            :init-options="initOptions"
            :option="option"
            theme="vab-echarts-theme"
          />
        </div>
        <div class="divider"></div>
        <div style="margin-top: 20px; padding: 0px 20px 10px;">
          <el-row :gutter="10" type="flex" align="middle">
            <el-col :span="10">
              <span>搜索:</span>
              <el-select placeholder="选择分拣员" style="width: 180px;">
                <el-option
                  v-for="item in opt1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-checkbox>隐藏供应商分拣信息</el-checkbox>
            </el-col>
            <el-col>
              <el-button type="primary">查询</el-button>
              <el-button>导出</el-button>
            </el-col>
          </el-row>
          <el-table :data="table1" style="width: 100%; margin-top: 10px;">
            <el-table-column label="仓库名称"></el-table-column>
            <el-table-column label="分拣员"></el-table-column>
            <el-table-column label="分拣订单数"></el-table-column>
            <el-table-column label="分拣包裹数"></el-table-column>
            <el-table-column label="分拣数量"></el-table-column>
            <el-table-column label="分拣金额"></el-table-column>
            <el-table-column label="分拣工资"></el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, prev, pager, next,sizes"
            :page-size="10"
            :page-sizes="[20, 30, 40, 50]"
            style="text-align: right;"
            :total="0"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="按商品统计" name="second">
        <el-row :gutter="10" type="flex" align="middle">
          <el-col :span="4">
            <el-select placeholder="请选择">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px;"
            ></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="选择分拣员">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请选商品名/助记码/编码/别名/关键字">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-checkbox>隐藏供应商分拣信息</el-checkbox>
          </el-col>
        </el-row>
        <el-table :data="table2" style="width: 100%; margin-top: 10px;">
          <el-table-column label="仓库名称"></el-table-column>
          <el-table-column label="分拣员"></el-table-column>
          <el-table-column label="商品名称"></el-table-column>
          <el-table-column label="分类"></el-table-column>
          <el-table-column label="分拣订单数"></el-table-column>
          <el-table-column label="分拣包裹数"></el-table-column>
          <el-table-column label="分拣数量"></el-table-column>
          <el-table-column label="分拣金额"></el-table-column>
          <el-table-column label="分拣工资"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next,sizes, jumper"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40]"
          style="text-align: right;"
          :total="0"
        />
      </el-tab-pane>
      <el-tab-pane label="分拣历史" name="third">
        <el-row :gutter="5">
          <el-col :span="5">
            <el-date-picker
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px;"
            ></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="选择分拣员">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-cascader :options="opt1" placeholder="全部分类"></el-cascader>
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请选商品名/助记码/编码/别名/关键字"
            ></el-input>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="titles">
              <h4>商品汇总</h4>
            </div>
            <el-table :data="table3" border style="width: 100%;">
              <el-table-column label="商品"></el-table-column>
              <el-table-column label="分拣数量"></el-table-column>
              <el-table-column label="分类"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="16">
            <div class="titles">
              <h4>商品明细</h4>
            </div>
            <el-table :data="table4" border style="width: 100%;">
              <el-table-column label="发货日期"></el-table-column>
              <el-table-column label="商品"></el-table-column>
              <el-table-column label="分拣数量"></el-table-column>
              <el-table-column label="分类"></el-table-column>
              <el-table-column label="客户"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import VabChart from '@/extra/VabChart'
  export default {
    components: {
      VabChart,
    },
    data() {
      return {
        activeName: 'first',
        radio1: '近30天',
        radio2: '分拣订单数',
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            top: '5%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '访问量',
              type: 'line',
              data: [],
              smooth: true,
              areaStyle: {},
              itemStyle: {
                borderRadius: [0, 5, 5, 0],
                color: new VabChart.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  ['#3ED572', '#399efd'].map((color, offset) => ({
                    color,
                    offset,
                  }))
                ),
              },
            },
          ],
        },
        opt1: [
          {
            value: '0',
            label: '分拣日期',
          },
          {
            value: '1',
            label: '发货日期',
          },
        ],
        table1: [],
        table2: [],
        table3: [],
        table4: [],
      }
    },
    mounted() {
      const base = +new Date(2020, 1, 1)
      const oneDay = 24 * 3600 * 1000
      const date = []

      const data = [Math.random() * 1500]
      let now = new Date(base)

      const addData = (shift) => {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        date.push(now)
        data.push(_.random(20000, 60000))

        if (shift) {
          date.shift()
          data.shift()
        }

        now = new Date(+new Date(now) + oneDay)
      }

      for (let i = 1; i < 6; i++) {
        addData()
      }
      addData(true)
      this.option.xAxis[0].data = date
      this.option.series[0].data = data
      this.timer = setInterval(() => {
        addData(true)
        this.option.xAxis[0].data = date
        this.option.series[0].data = data
      }, 6000)
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 0 20px 10px;

    .rankingModule {
      margin: 10px 0 40px;

      ._icons {
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #333;
        margin-right: 5px;
      }
    }

    .divider {
      height: 16px;
      background: #f2f3f5;
      width: 100%;
    }

    .titles {
      text-align: left;
      border-bottom: 1px solid #ddd;
      padding: 0 10px 10px 0;

      h4 {
        font-size: 14px;
        padding: 2px 10px;
        margin: 15px 0 0;
        display: block;
        border-left: 5px solid #1890ff;
      }
    }
  }
</style>
